<script>
import { getPro } from "../api/productserver";
import { statcUrl } from "../api/api";
import Product from "./product.vue";

export default {
  components: {
    product: Product, //子组件传进来
  },
  data() {
    return {
      //用到的数据
      proData: { hot: [], new: [] },
      isType: "new",
      statcUrl,
    };
  },
  computed: {
    showData() {
      return this.proData[this.isType];
    },
  },
  mounted() {
    //vue组件请求后端数据没有特殊需求都是在第一次渲染完成后发送，
    //因为请求的数据可能是要挂载dom如果dom没有渲染完成,操作会报错
    this.getNew();
  },
  methods: {
    getNew() {
      if (this.proData.new.length > 0) {
        this.isType = "new";
      } else {
        getPro({ page: 1, orderbytype: "popular" }, (res) => {
          console.log(res);
          this.proData.new = res.data[0].data;
          this.isType = "new";
        });
      }
    },

    getHot() {
      if (this.proData.hot.length > 0) {
        this.isType = "hot";
      } else {
        getPro({ page: 1, orderbytype: "sales" }, (res) => {
          this.proData.hot = res.data[0].data;
          this.isType = "hot";
        });
      }
    },
  },
};
</script>
<template>
  <div class="home-pro">
    <h3 class="title">
      <span
        class="iconfont icon-left-circle"
        @click="getNew"
        v-show="isType == 'hot'"
      ></span>
      {{ isType == "new" ? "人气推荐" : "超值热卖" }}
      <span
        class="iconfont icon-roundright"
        @click="getHot"
        v-show="isType == 'new'"
      ></span>
      <!-- <span class="icon-roundright"></span> -->
      <div class="tag">{{ isType == "new" ? 1 : 2 }}/2</div>

      <product :dataList="showData" />
    </h3>
  </div>
</template>
<style src="../pages/home/index.scss"></style>
